<template>
  <div class="dswd-menu">
    <ul class="dswd-menu-list">
      <template v-for="menu of menuData">
        <li
          :key="menu.id"
          class="dswd-menu-item"
          :class="{
            'is-active': currentPath === menu.path
          }"
          @click="selectItem(menu)"
        >
          <span class="dswd-menu-item-title">{{ menu.name }}</span>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentPath: this.activePath
    }
  },
  props: {
    menuData: {
      type: Array,
      default: () => []
    },
    activePath: {
      type: String,
      default: () => null
    }
  },
  watch: {
    $route(to, from) {
      this.currentPath = to.path
    }
  },
  methods: {
    selectItem(item, menu) {
      if (item.children === undefined) {
        if (menu) {
          this.currentPath = menu.path
        } else {
          this.currentPath = item.path
        }
        this.$emit('menuChange', item)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sticky {
  .dswd-menu .dswd-menu-list .dswd-menu-item {
    color: #262626;
    .dswd-menu-item-circle{
      background-color: #262626;
    }
  }
}
.dswd-menu {
  .dswd-menu-list {
    display: flex;
    justify-content: flex-end;
    .dswd-menu-item-open {
      background: #fff;
    }
    .dswd-menu-item {
      margin-left: 55px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      position: relative;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      &:hover,
      :active {
        font-weight: 600;
      }
      .dswd-menu-item-title {
        display: inline-block;
      }
      .dswd-menu-item-circle {
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        margin: auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #b1c9eb;
      }
    }
    .is-active {
      font-weight: 600;
    }
  }
}
</style>
